<!--
 * @Author: 孙文豪
 * @Description: 表格页面基础布局  布局  参考客户列表整体右侧布局
 * @Date: 2024-03-05 16:15:23
 * @LastEditTime: 2024-03-06 10:11:22
 * @LastEditors: 孙文豪
-->
<template>
    <div class="custom-page">
      <div class="custom-top">顶部，可显示检索相关公共内容</div>
      <div class="custom-bottom">
        <div class="custom-table-top">表头</div>
        <div class="custom-table-middle">表格区域</div>
        <div class="custom-table-bottom">底部分页</div>
      </div>
    </div>
  </template>
  
  <script>
  import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
  export default {
    name: '',
    setup() {
      const data = reactive({});
      onBeforeMount(() => {});
      onMounted(() => {});
      return {
        ...toRefs(data)
      };
    }
  };
  </script>
  <style scoped lang="less">
  .custom-page {
    position: relative;
    height: 100%;
    padding-top: 125px;
    box-sizing: border-box;
    .custom-top {
      position: absolute;
      height: 125px;
      width: 100%;
      top: 0;
      box-shadow: 0px 1px 1px #ddd;
    }
    .custom-bottom {
      position: relative;
      height: 100%;
      padding-top: 40px;
      padding-bottom: 60px;
      box-sizing: border-box;
      .custom-table-top {
        position: absolute;
        height: 40px;
        width: 100%;
        top: 0;
      }
      .custom-table-middle {
        height: 100%;
        background: #ddd;
      }
      .custom-table-bottom {
        position: absolute;
        height: 60px;
        width: 100%;
        bottom: 0;
      }
    }
  }
  </style>
  